{% layout "Layout-Login" %}
{% assign user_can_register = Site.Properties.RegistrationSettings.UsersCanRegister %}
{% assign allow_reset_password = Site.Properties.ResetPasswordSettings.AllowResetPassword %}
{% assign login_providers = "AzureAD,GitHub" | split: "," %} {% comment %}This is a dumb hack... too bad.{% endcomment %}
{% assign disable_local_login = Site.Properties.LoginSettings.DisableLocalLogin %}
<h1 class="login">{{ "Log In" | t }}</h1>
<p class="login h4"><a href="{{ '~/' | href }}"><i class="icon {{ Site.Properties.SiteIcon.SiteIcon.Icon.Text }} mr-2"></i>{{ Site.SiteName }}</a></p>
<div class="login">
    {% if login_providers or user_can_register == 1 %}  
    <div class="flex-fill {% if login_providers %}col-lg-4 col-md-6 col-12{% else %}col-12{% endif %}">
        {% if login_providers %}   
        <section class="section-panel">
            <h2 class="text-center">{{ "Log in with" | t }}</h2>
            <p class="text-center">{{ "Linked accounts must have a verified @canada.ca email" | t }}</p>
            {% form asp_controller:"Account", asp_action:"ExternalLogin", asp_route_returnurl:Request.Query["returnurl"], method:"post", class:"d-flex justify-content-center" %}
                <div class="d-flex flex-column justify-content-center">
                    {% for provider in login_providers %}
                        {% if provider == "GitHub" %}
                            <button type="submit" class="btn btn-lg btn-primary m-2 nav-link is-rounded" name="provider" value="{{ provider }}" title="GitHub">
                                <i class="fab fa-github mr-2"></i>
                                GitHub
                            </button>
                        {% endif %}
                        {% if provider == "AzureAD" %} 
                            <button type="submit" class="btn btn-lg btn-primary m-2 nav-link is-rounded" name="provider" value="{{ provider }}" title="Azure">
                                <i class="mr-2" aria-hidden="true">
                                    <svg width="24px" height="24px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                                        <path d="M26.23,4.85L12.07,17.12L0,38.79L10.89,38.79L26.23,4.85ZM28.11,7.72L22.07,24.74L33.65,39.29L11.19,43.15L48,43.15L28.11,7.72Z" style="fill:white;fill-rule:nonzero;"/>
                                    </svg>
                                </i>
                                Azure
                            </button>
                        {% endif %} 
                        {% if disable_local_login %}
                            <br />
                        {% endif %}
                    {% endfor %}
                </div>
            {% endform %}
        </section>
        {% endif %}
        {% if user_can_register == 1 %}
        <section class="d-flex justify-content-center my-4">
            {% a class:"h4", asp_controller:"Registration", asp_action:"Register", asp_route_returnurl:Request.Query["returnurl"] %}{{ "Register as a new user" | t }}{% enda %}
        </section>
        {% endif %}
    </div>
    {% endif %}
    {% unless disable_local_login %}
    <div class="flex-fill col-lg-4 col-md-6 col-12"> 
        <section class="section-panel">
            <h2 class="text-center">{{ "vLab account" | t }}</h2>
            {% form asp_controller:"Account", asp_action:"Login", asp_route_returnurl:Request.Query["ReturnUrl"], method:"post", class:"auth-form" %}
                <div class="form-group d-flex flex-column align-items-center justify-content-center py-2">
                    {% block "label", class:"asterix", asp_for:"UserName" %}{{ "Username" | t }}{% endblock %}
                    {% helper "input", asp_for:"UserName", class:"form-control", aria_describedby:"UserName-described-by", autocomplete:"username" %}
                    {% helper "span", id:"UserName-described-by", asp_validation_for:"UserName", class:"text-danger" %}
                </div>
                <div class="form-group d-flex flex-column align-items-center justify-content-center py-2">
                    {% block "label", class:"asterix", asp_for:"Password" %}{{ "Password" | t }}{% endblock %}
                    {% helper "input", asp_for:"Password", class:"form-control", aria_describedby:"Password-described-by", autocomplete:"current-password" %}
                    {% helper "span", id:"Password-described-by", asp_validation_for:"Password", class:"text-danger" %}
                </div>
                <div class="form-group custom-control custom-checkbox d-flex justify-content-center py-2">
                    {% helper "input", asp_for:"RememberMe", class:"custom-control-input" %}
                    {% block "label", asp_for:"RememberMe", class:"custom-control-label" %}{{ "Remember me" | t }}{% endblock %}
                </div>
                {% render_section "AfterLogin", required: false %}
                <div class="d-flex justify-content-center py-2">
                    <button type="submit" class="btn btn-lg btn-primary is-rounded"><span>{{ "Login" | t }}</span></button>
                </div>
                {% if allow_reset_password %}
                    <div class="d-flex justify-content-center mt-3">
                        {% a class:"h4", asp_controller:"ResetPassword", asp_action:"ForgotPassword" %}{{ "Forgot your password?" | t }}{% enda %}
                    </div>
                {% endif %}
            {% endform %}
        </section>
    </div>
    {% endunless %}
</div>
